<template>
  <div id="Orders">
       <!-- 面包屑 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>订单管理</el-breadcrumb-item>
  <el-breadcrumb-item>订单列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card class="box-card">
   <div class="search">
    <el-input placeholder="请输入内容"  class="input-with-select" clearable v-model="queryInfo.query" @clear="getOrdersList">
      <el-button slot="append" icon="el-icon-search" @click="getOrdersList"></el-button>
    </el-input>
  </div>
   <!-- 表格区 -->
  <el-table
  border
    :data="ordersList"
    style="width: 100%;margin:10px 0">
    <el-table-column
      type="index"
      label="#"
      width="60"
    >
    </el-table-column>
    <el-table-column
      property="order_number"
      label="订单编号"
      width="340"
     >
    </el-table-column>
     <el-table-column
      property="order_price"
      label="订单价格"
     >
     </el-table-column>
      <el-table-column
      property="pay_status"
      label="是否付款"
     >
     <template slot-scope="scope">
      <el-tag type="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
      <el-tag type="danger" v-else>未付款</el-tag>
      </template>
    </el-table-column>
     <el-table-column
      property="is_send"
      label="是否发货"
     >
    </el-table-column>
  
     <el-table-column
      property="create_time"
      label="下单时间"
       width="300"
     >
      <template slot-scope="scope">
        {{scope.row.create_time | dateFormat}}
     </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- enterable方法提示文字离开隐藏 -->
        <el-tooltip class="item" effect="dark" content="编辑" placement="top" :enterable="false">
        <el-button type="primary"  size="mini" icon="el-icon-edit" @click="editDialog()"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="物流进度" placement="top" :enterable="false">
        <el-button
          size="mini"
          type="success"
          icon="el-icon-location"
          @click="handleAdress(scope.$index, scope.row)"></el-button>
           </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
   <!-- 分页区 -->
 <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 5, 10, 20]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" background>
    </el-pagination>
  </div>
</el-card>
 <!-- 弹出修改对话框 -->
<el-dialog title="修改地址" :visible.sync="editFormVisible" @close="addressDialogClose">
  <el-form :model="editForm" class="demo-ruleForm" :rules="rules" ref="ruleFormEdit" label-width="100px">
    <el-form-item label="省市区/县"  prop="address1">
    <el-cascader
    clearable
    v-model="editForm.address1"
    expand-trigger="hover"
    :options="citrData"
   ></el-cascader>
    </el-form-item>
    <el-form-item label="详细地址" prop="address2">
    <el-input v-model="editForm.address2"></el-input>
  </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="offEdit">取 消</el-button>
    <el-button type="primary" @click="sureEdit">确 定</el-button>
  </div>
</el-dialog>
<!-- 弹出物流进度对话框 -->
<el-dialog title="物流进度" :visible.sync="editFormVisible2">
   <el-timeline :reverse="reverse">
    <el-timeline-item
      v-for="(activity, index) in progressIndo"
      :key="index"
      :timestamp="activity.time">
      {{activity.context}}
    </el-timeline-item>
  </el-timeline>
</el-dialog>
  </div>
</template>

<script>
import citrData from '../components/citydata.js'
export default {
  data(){
    return{
      queryInfo:{
        query:'',
        pagenum:1,
        pagesize:10
      },
      total:0,
      ordersList:[],
      editFormVisible:false,
      editFormVisible2:false,
      editForm:{
        address1:[],
        address2:''
      },
       rules:{
        address1:[
            { required: true, message: '请选择省市区', trigger: 'blur' },
          ],
          address2:[
            { required: true, message: '请输入详细地址', trigger: 'blur' },
          ],
        },
        citrData:citrData,
        progressIndo:[
      {
        "time": "2018-05-10 09:39:00",
        "ftime": "2018-05-10 09:39:00",
        "context": "已签收,感谢使用顺丰,期待再次为您服务",
        "location": ""
      },
      {
        "time": "2018-05-10 08:23:00",
        "ftime": "2018-05-10 08:23:00",
        "context": "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
        "location": ""
      },
      {
        "time": "2018-05-10 07:32:00",
        "ftime": "2018-05-10 07:32:00",
        "context": "快件到达 [北京海淀育新小区营业点]",
        "location": ""
      },
      {
        "time": "2018-05-10 02:03:00",
        "ftime": "2018-05-10 02:03:00",
        "context": "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
        "location": ""
      },
      {
        "time": "2018-05-09 23:05:00",
        "ftime": "2018-05-09 23:05:00",
        "context": "快件到达 [北京顺义集散中心]",
        "location": ""
      },
      {
        "time": "2018-05-09 21:21:00",
        "ftime": "2018-05-09 21:21:00",
        "context": "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
        "location": ""
      },
      {
        "time": "2018-05-09 13:07:00",
        "ftime": "2018-05-09 13:07:00",
        "context": "顺丰速运 已收取快件",
        "location": ""
      },
      {
        "time": "2018-05-09 12:25:03",
        "ftime": "2018-05-09 12:25:03",
        "context": "卖家发货",
        "location": ""
      },
      {
        "time": "2018-05-09 12:22:24",
        "ftime": "2018-05-09 12:22:24",
        "context": "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
        "location": ""
      },
      {
        "time": "2018-05-08 21:36:04",
        "ftime": "2018-05-08 21:36:04",
        "context": "商品已经下单",
        "location": ""
      }
    ],
reverse: true,
    }

  },
  created(){
    this.getOrdersList()
  },
  methods:{
    async getOrdersList(){
      const {data:res}=await this.$http.get(`orders`,{params:this.queryInfo})
      if(res.meta.status!==200){
        return this.$message.error('获取订单列表失败')
      }
      this.ordersList=res.data.goods
      this.total=res.data.total
    },
    handleSizeChange(newSize){
      this.queryInfo.pagesize=newSize
       this.getOrdersList()
    },
    handleCurrentChange(newnum){
      this.queryInfo.pagenum=newnum
       this.getOrdersList()
    },
    editDialog(){
      this.editFormVisible=true
    },
    offEdit(){
      this.editFormVisible=false
    },
    addressDialogClose(){
      this.$refs.ruleFormEdit.resetFields()
    },
    // [省市区/县联动效果 - 结合ElementUI的 el-cascader 组件](https://github.com/iceyangcc/provinces-china)
    sureEdit(){
       this.$refs.ruleFormEdit.validate(valid=>{
          if(!valid) return
         this.$message.success('修改成功')
          this.editFormVisible=false
        })
    },
    handleAdress(index,row){
      //接口不能使用  使用假数据
      // const {data:res}=await this.$http.get(`/kuaidi/804909574412544580`)
      // if(res.meta.status!==200){
      //   return this.$message.error('获取物流信息失败')
      // }
      // this.progressIndo=res.data
      this.editFormVisible2=true
    }
  }
}
</script>

<style lang="less" scoped>
@import '../plugins/timeline/timeline.css';
@import '../plugins/timeline-item/timeline-item.css';
#Orders{
  .box-card{
    margin: 20px 0;
      .search{
      .el-input-group{
        width: 20%;
      }
    }
  }
}
</style>